<template>
  <div>
    <van-nav-bar title="编辑动态" left-arrow @click-left="onClickLeft" />

    <van-uploader :after-read="afterRead" />
    <van-cell-group inset>
      <van-field v-model="value" placeholder="填写标题会有更多人浏览哦~" />
    </van-cell-group>
    <van-divider />
    <van-cell-group inset>
      <van-field
        v-model="value1"
        placeholder="分享你的玩乐发现，玩了什么、体验如何~"
      />
    </van-cell-group>

    <div class="ht">
      <span>#话题</span>
      <span>@用户</span>
    </div>
    <van-divider />
    <div class="place">
      <img src="../../assets/md-place.png" alt="" />
      <span>添加地点</span>
    </div>
    <div class="bottom">
      <div class="caog">
        <div class="caog-img">
          <img src="../../assets/mail.png" alt="" />
        </div>
        <span>存草稿箱</span>
      </div>
      <button>发布动态</button>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const onClickLeft=()=>{
    router.go(-1)
}
</script>

<style scoped>
.van-nav-bar {
  --van-nav-bar-icon-color: #000;
}
.van-uploader {
  padding: 20px;
  box-sizing: border-box;
}
.van-field {
  --van-field-placeholder-text-color: rgba(149, 149, 149, 1);
  font-size: 16px;
  padding: 5px 0;
}
.van-divider {
  /* height: 1px; */
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(187, 187, 187, 1);
  margin: 0;
}
.ht span {
  display: inline-block;
  width: 70px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  border: 1px solid rgba(187, 187, 187, 1);
  margin-top: 200px;
  margin-left: 14px;
  margin-bottom: 10px;
}
.place img {
  margin-left: 14px;
  margin-top: 10px;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.place span {
  display: inline-block;
  width: 64px;
  height: 24px;
  line-height: 24px;
  color: rgb(16, 16, 16);
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-regular;
  vertical-align: bottom;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.bottom .caog {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom .caog .caog-img {
  width: 40px;
  height: 40px;
  background-color: rgba(250, 232, 132, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  border-radius: 50%;
}
.bottom .caog .caog-img img {
  width: 24px;
  height: 24px;
  margin-top: 8px;
}
.bottom .caog .caog-img span {
  display: inline-block;
  color: rgb(16, 16, 16);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.bottom button {
  width: 240px;
  height: 42px;
  line-height: 20px;
  border-radius: 50px;
  background-color: rgba(104, 165, 225, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  border: 0;
}
</style>
